<template>
  <div class="finish-wrap">
    <div class="finish-header">
      <div class="finish-img">
      </div>
    </div>
    <div class="finish-tip">
      支付成功
    </div>
    <div class="finish-content">
      您已提交预约申请，请等候教练确认订单。
    </div>
    <div class="finish-footer">
        <router-link to="/">回到首页</router-link>
        <span>
          <router-link to="/#myself">查看订单</router-link>
        </span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['title', 'content', 'link']
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
  .finish-wrap
    background-color rgb(255,255,255)
    height: 100%
    position: fixed
    width: 100%
    .finish-header
      margin-top: 80px
      .finish-img
        /* 这里是创建一个原形的icon，样式在mixin中定义  */
        circle-icon-1px($theme,100px)  
        margin: 0 auto         
        bg-image('complete_icon')
    .finish-tip
      color: $main-fn
      font-size: 20px
      font-weight: bold
      height: 28px
      line-height: 28px
      margin-top: 25px
      text-align: center
    .finish-content
      min-height 21px
      width 200px
      color: $se-fn
      font-size: 15px
      line-height: 21px
      padding-top: 12px
      text-align: center
      margin: 0 auto
    .finish-footer
      position: fixed
      bottom: 32px
      left: 0px
      right: 0px
      height: 20px
      line-height: 20px
      color: rgb(87,107,149)
      font-size: 14px
      text-align: center
      font-weight: bold
      span
        border-left: 1px solid $pre-fn
        padding-left: 7px
        margin-left: 7px
</style>